<template>
    <view class="load" v-if="!load">
        <u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
    </view>
    <view v-else>
        <view class="midHead">
            <view class="midcon">
                <view class="midTitle">
                    <view class="title">{{ resData.Title ? $util.entitiesToUtf16(resData.Title) : '' }}</view>
                    <!-- <view :class="{ 'state': resData.Status == 0, 'finish': resData.Status == -2, 'finish': resData.Status == 1 || resData.Status == 3, 'behalf': resData.Status == -1 }">
							{{ $util.getStatus(resData.Status, '一起挥') }}
					</view> -->
                </view>
            </view>
            <view class="describe">
                <!-- <text v-if="toggle" class="describetext">{{ resData.Remark ? $util.entitiesToUtf16(resData.Remark) :
                    '当前未有简绍' }}</text> -->
                <!-- <text class="describetext2">{{ resData.Remark ? $util.entitiesToUtf16(resData.Remark) : '当前未有简绍'
                    }}</text> -->
                <!-- <view v-if="resData.Remark && resData.Remark.length > 38" :class="toggle ? 'expand' : 'retract'"
                    @click="onexpand">
                    <text class="expandtext">全文</text>
                    <image v-if="toggle" class="expandimg"
                        src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17105662490661328.png"></image>
                    <image v-else class="expandimg"
                        src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1711679435607517.png"></image>
                </view> -->
            </view>
        </view>
        <view class="listBox">
            <messageList :list="applyList" :type="resData.AppointmentType" @init="init" @changeList="changeList">
            </messageList>
        </view>


    </view>
</template>

<script>
import messageList from '@/components/messageList/messageList.vue';
export default {
    components: {
        messageList
    },
    data() {
        return {
            toggle: true,
            ID: '',
            resData: {},
            peoplelength: 0,
            ossPath: '',
            applyList: [],
            load: false,
        };
    },
    onLoad(e) {
        this.ID = e.id
        this.init()
        this.ossPath = this.$ossPath
    },
    methods: {
        onexpand() {
            this.toggle = !this.toggle;
        },
        lookTel(itme) {
            this.$refs.telbox.open()
        },
        // 获取定位
        async getLocationSysc() {
            let _this = this;
            return new Promise((resolve, reject) => {
                uni.getLocation({
                    type: 'gcj02',
                    success: function (res) {
                        resolve(res);
                    },
                    fail: function (err) {
                        const defaultLocation = {
                            latitude: 0,
                            longitude: 0
                        };
                        resolve(defaultLocation);
                    }
                });
            });
        },
        async init() {
            let loc = await this.getLocationSysc();

            this.longitude = loc.longitude;
            this.latitude = loc.latitude;

            let res = await this.$api.post('Appointment/Detail', {
                ID: this.ID,
                User_Lng: loc.longitude,
                User_Lat: loc.latitude
            });
            if (res.code == 0) {
                this.resData = res.data
                this.peoplelength = this.resData.Item.length

                this.applyList = res.data.Item.filter((v) => v.UserID != this.resData.UserID && v.Status != -1).map((v) => {
                    return v;
                });
                this.load = true
            }
        },
        changeList(status, index) {
            let listData = this.applyList[index]
            listData.Status = status
            this.$set(this.applyList, index, listData)
        },
    },
    created() {

    },
}
</script>
<style lang='scss'>
page {
    background-color: #f6f6f6;
}

.listBox{
    padding-bottom: 60rpx;
}

.midHead {
    width: 94%;
    padding: 24rpx;
    background-color: #fff;
    margin: 0 auto;
    margin-top: 20rpx;
    border-radius: 16rpx;

    .midcon {
        display: flex;
        justify-content: space-between;
        // margin-bottom: 16rpx;
    }

    .midSubTitle {
        font-size: 28rpx;
        color: #666666;
    }

    .midTitle {
        width: 100%;
        font-size: 32rpx;
        color: #333333;

        font-weight: 600;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .title {
            max-width: 80%;
            // white-space: nowrap;
            // overflow: hidden;
            // text-overflow: ellipsis;
            font-weight: 600;
            font-weight: bold;
        }

        .type {
            color: #706EEE;
            font-size: 32rpx;
            font-weight: 600;
        }

        .state {
            font-size: 28rpx;
            font-weight: 500;
            color: #2BA139;
        }

        .behalf {
            font-size: 28rpx;
            color: #FFA11A;
        }

        .finish {
            min-width: 180rpx;
            text-align: right;
            color: #999999 !important;
            font-size: 28rpx;
        }
    }

    .shareBtn {
        width: 48rpx;
        height: 48rpx;

        button {
            display: flex;
            background-color: unset;
            //height:50rpx !important;
            //margin-top: -30rpx;
            // position: absolute;
            width: 100%;
            height: 100%;
            // right: 100rpx;
            // right: 0;

            image {
                width: 100%;
                height: 100%;
            }
        }
    }
}
</style>